<script setup lang="ts">
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

import { toRefs } from 'vue'

const props = defineProps(['productFAList', 'pmpList', 'badList', 'capaList'])
const { productFAList, pmpList, badList, capaList } = toRefs(props)

//生产信息
const productColumns = [
  {
    title: '序号',
    dataIndex: 'ID'
  },
  {
    title: '时间',
    dataIndex: 'Time'
  },
  {
    title: '计划',
    dataIndex: 'PlanQty'
  },
  {
    title: '投入',
    dataIndex: 'InputQty'
  },
  {
    title: '达成率',
    dataIndex: 'YieldRate'
  },
  {
    title: '测试',
    dataIndex: 'FTQty'
  },
  {
    title: '入库',
    dataIndex: 'WHQty'
  }
]
//不良信息
const badColumns = [
  {
    title: '序号',
    dataIndex: 'ID'
    // width: '3%'
  },
  {
    title: '工单',
    dataIndex: 'WO'
    // width: '5%'
  },
  {
    title: '机种',
    dataIndex: 'Model'
    // width: '8%'
  },
  {
    title: '错误编码',
    dataIndex: 'ErrCode'
  },
  {
    title: '维修编码',
    dataIndex: 'RepairCode'
  },
  {
    title: '解决方案',
    dataIndex: 'SolutionCode'
  },
  {
    title: '故障原因',
    dataIndex: 'RootCause'
  },
  {
    title: '数量',
    dataIndex: 'Qty'
  }
]
</script>
<template>
  <div class="bad">
    <div class="my-table product-info">
      <h3>生产信息</h3>
      <a-table :columns="productColumns" :data-source="capaList" :pagination="false">
        <template #bodyCell="{ column, index }">
          <template v-if="column.dataIndex === 'ID'">
            <span>{{ index + 1 }}</span>
          </template>
        </template>
      </a-table>
    </div>
    <div class="my-table">
      <h3>不良信息(TOP 10)</h3>
      <a-table :columns="badColumns" :data-source="badList" :pagination="false">
        <template #bodyCell="{ column, index }">
          <template v-if="column.dataIndex === 'ID'">
            <span>{{ index + 1 }}</span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
  <div class="my-card">
    <h3 class="title" style="margin-top: 15px">WIP信息</h3>
    <div class="product" style="width: 100%; margin: 12px auto">
      <div class="table-head-box">
        <p style="width: 3%">序号</p>
        <p style="width: 12%">工单</p>
        <p style="width: 15%">机种</p>
        <p style="width: 8%">料号</p>
        <p style="width: 5%">数量</p>
        <p style="width: 5%">已投</p>
        <p style="width: 5%">未投</p>
        <p style="width: 5%">达成率</p>
        <p style="width: 5%">组装</p>
        <p style="width: 5%">测试</p>
        <p style="width: 5%">质检</p>
        <p style="width: 5%">维修</p>
        <p style="width: 5%">包装</p>
        <p style="width: 5%">入库</p>
        <p style="width: 5%">未入</p>
        <p style="width: 7%">工单天数</p>
      </div>
      <vue3-seamless-scroll
        :list="productFAList"
        :limit-scroll-num="9"
        :step=".28"
        :hover="true"
        class="scroll"
      >
        <template v-if="productFAList.length">
          <div class="item" v-for="(item, index) in productFAList" :key="index">
            <span style="width: 3%">{{ index + 1 }}</span>
            <span style="width: 12%">{{ item.WO }}</span>
            <span style="width: 15%">{{ item.Model }}</span>
            <span style="width: 8%">{{ item.PN }}</span>
            <span style="width: 5%">{{ item.Qty }}</span>
            <span style="width: 5%">{{ item.InputQty }}</span>
            <span style="width: 5%">{{ item.NonInputQty }}</span>
            <span v-if="parseFloat(item.AchievingRate) == 0" style="width: 5%; color: white">
              {{ item.AchievingRate + '%' }}
            </span>
            <span
              v-if="parseFloat(item.AchievingRate) > 0 && parseFloat(item.AchievingRate) < 60"
              style="width: 5%; color: #d46b08"
            >
              {{ item.AchievingRate + '%' }}
            </span>
            <span
              v-if="parseFloat(item.AchievingRate) > 60 && parseFloat(item.AchievingRate) < 100"
              style="width: 5%; color: #108ee9"
            >
              {{ item.AchievingRate + '%' }}
            </span>
            <span v-if="parseFloat(item.AchievingRate) === 100" style="width: 5%; color: #87d068">
              {{ item.AchievingRate + '%' }}
            </span>
            <span style="width: 5%">{{ item.AssemblyQty }}</span>
            <span style="width: 5%">{{ item.PRCQty }}</span>
            <span style="width: 5%">{{ item.FQAQty }}</span>
            <span style="width: 5%">{{ item.RepairQty }}</span>
            <span style="width: 5%">{{ item.PackingQty }}</span>
            <span style="width: 5%">{{ item.WHQty }}</span>
            <span style="width: 5%">{{ item.NonWHQty }}</span>
            <span
              v-if="parseFloat(item.WODays) == 6 || parseFloat(item.WODays) == 7"
              style="width: 7%; color: #d46b08"
            >
              {{ item.WODays }}
            </span>
            <span v-else-if="parseFloat(item.WODays) > 7" style="width: 7%; color: #ff4d4f">
              {{ item.WODays }}
            </span>
            <span v-else style="width: 7%">
              {{ item.WODays }}
            </span>
          </div>
        </template>
        <template v-else>
          <div class="my-empty-data"><p>No Data</p></div>
        </template>
      </vue3-seamless-scroll>
    </div>
  </div>
  <h3 style="margin-top: 15px">PMP管控信息(FPY)</h3>
  <div class="pmp" style="width: 100%; margin: 12px auto">
    <div class="table-head-box">
      <p style="width: 3%">序号</p>
      <p style="width: 12%">工单</p>
      <p style="width: 15%">机种</p>
      <p style="width: 8%">料号</p>
      <p style="width: 5%">数量</p>
      <p style="width: 9%">外观</p>
      <p style="width: 9%">前测</p>
      <p style="width: 8%">老化</p>
      <p style="width: 8%">后测</p>
      <p style="width: 9%">包装</p>
      <p style="width: 7%">目标</p>
      <p style="width: 7%">实际</p>
    </div>
    <vue3-seamless-scroll
      :list="pmpList"
      :limit-scroll-num="9"
      :step=".28"
      :hover="true"
      class="scroll"
    >
      <template v-if="pmpList.length">
        <div class="item" v-for="(item, index) in pmpList" :key="index">
          <span style="width: 3%">{{ index + 1 }}</span>
          <span style="width: 12%">{{ item.WO }}</span>
          <span style="width: 15%">{{ item.Model }}</span>
          <span style="width: 8%">{{ item.PN }}</span>
          <span style="width: 5%">{{ item.Qty }}</span>
          <span style="width: 9%">{{ item.ACOSFPY + '%' }}</span>
          <span style="width: 9%">{{ item.FCTFPY + '%' }}</span>
          <span style="width: 8%">{{ item.RuninFPY + '%' }}</span>
          <span style="width: 8%">{{ item.FCT2FPY + '%' }}</span>
          <span style="width: 9%">{{ item.PCOSFPY + '%' }}</span>
          <span style="width: 7%">{{ item.FPY_Target + '%' }}</span>
          <template v-if="parseFloat(item.FPY_Autual) < parseFloat(item.FPY_Target)">
            <span style="width: 7%; color: #ff4d4f">
              {{ item.FPY_Autual + '%' }}
            </span>
          </template>
          <template v-else>
            <span style="width: 7%; color: #52c41a">
              {{ item.FPY_Autual + '%' }}
            </span>
          </template>
        </div>
      </template>
      <template v-else>
        <div class="my-empty-data"><p>No Data</p></div>
      </template>
    </vue3-seamless-scroll>
  </div>
</template>

<style lang="less" scoped>
h3 {
  color: #fff;
}

img {
  max-width: 100%;
  /* 图片宽度最大为100% */
  height: auto;
  /* 高度自适应 */
}

.flex {
  display: flex;
  justify-content: space-between;
}

.box {
  position: relative;
}

.flex p {
  width: 50%;
}

.table-head-box {
  display: flex;
  align-items: center;
  background-color: #143452;
}

.table-head-box p {
  font-weight: 500;
  background: #143452;
  color: #79a0c9;
  padding: 6px 0 !important;
  margin: 0;
}

.table-head-box p {
  display: inline-block;
  width: calc(100% / 15);
  text-align: center;
  padding: 3px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.product {
  .item {
    span {
      display: inline-block;
      // width: calc(100% / 15);
      text-align: center;
      padding: 3px 0;
    }
  }
}

.scroll {
  height: 220px;
  width: 100%;
  overflow: hidden;
  background-color: #141c36;
}

.scroll .item {
  display: flex;
  align-items: center;

  span {
    background: #141c36;
    color: #799ac1;
  }
  &:hover span {
    background: #143452;
  }
}

.my-card {
  height: 290px;
  position: relative;
}

.my-card .select-box {
  position: absolute;
  left: 100px;
  top: -5px;
}

.pmp {
  .table-head-box {
    .special {
      span {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      em {
        font-style: normal;
      }
    }
  }

  .item {
    justify-content: space-around;
    background: #141c36;

    span {
      display: block;
      width: calc(100% / 6);
      text-align: center;
      padding: 3px 0;
    }
  }
}

.bad {
  display: flex;
  justify-content: space-between;

  .my-table {
    width: 30%;

    &:nth-child(2) {
      width: 69%;
    }
  }
}

:deep(.ant-alert) {
  padding: 5px;
  margin: 0 auto;

  .ant-alert-icon {
    margin: 0;
  }
}
:deep(.ant-alert-message) {
  font-size: 12px;
}
:deep(.product-info .ant-table-tbody){
  height: 260px;
  overflow: hidden;
}
.my-empty-data{
  padding-top: 100px;
}
</style>
